<template>
  <div class="bj">
	
	<div style="margin-top:20px;">
		<van-row>
		  <van-col span="8">
			  <van-nav-bar
			      class="dhsz01"
			      title=""
			      left-text="返回"
			      left-arrow
			      @click-left="onClickLeft"
			      style="background:0px "
			      border=false
			  />
		  </van-col>
		  <van-col span="8"></van-col>
		  <van-col span="8">
			  <van-nav-bar
			      class="dhsz01"
			      title=""
			      right-text="修改详情"
			      right-arrow
			      @click-right="onClickRight"
			      style="background:0px "
			      border=false
			  />
		  </van-col>
		</van-row>
	</div>
	
    <div style="margin-top:50px;">
    </div>
    <van-row>
      <van-col span="8"></van-col>
      <van-col span="8">
        <van-uploader :after-read="afterRead"><van-image
            round
            width="8rem"
            height="8rem"
            :src="headurl"
        />
        </van-uploader></van-col>
      <van-col span="8">
      </van-col>
    </van-row>
	
	<van-cell-group inset>
	  <van-cell title="昵称" :value="nickname" />
	  <van-cell title="性别" :value="sex" />
      <van-cell title="生日" :value="date" @click="show = true" />
      <van-calendar v-model:show="show" @confirm="onConfirm" />
      <van-cell title="运动天数" :value="sportdays" />
      <van-cell title="所在城市" :value="city" />
    </van-cell-group>
  </div>
</template>

<script>
import { ref } from 'vue';


export default {
  data() {
		const date = ref('');
        const show = ref(false);
		const onClickLeft = () => history.back();
        const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
        const onConfirm = (value) => {
          show.value = false;
          date.value = formatDate(value);
		  
		  
    };

	return {
	  dzsl:520,
	  grade:"运动达人",
	  name:"LX",
	  date,
	  show,
	  onConfirm,
	  onClickLeft,
	  headurl:"https://cos.mybonbon.cn/image/2021110321460964445900035740e7b2e71bb31391cc83.PNG"	  
	}
	
  },
  methods:{
    afterRead(file){
      var that=this;
      console.log(file);
      const forms = new FormData();
      //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file", file.file); // 获取上传图片信息
      this.axios.post("oss/uploadHeadImg",forms,{
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then((res)=>{
        if(res.data.code==200){
          that.headurl=res.data.data;
        }
      }).catch((e)=>{
      })
    },
	onClickRight(){
		this.$router.push("/writeMydetail");
	}
  }
};
</script>

<style>
/* .bj{
  background-image: url("../im/11.jpeg");
}
.dz{
  color: crimson;
}
 */

</style>

